<template>
	<view style="background-color: #F8F8F8;" v-if="detail">
		<view class="nav-back">
			<top-heigth background="#fff"></top-heigth>
			<uv-navbar :fixed="false" :safeAreaInsetTop="false">
				<template v-slot:right>
					<view v-if="detail.isCollect == 0" class="uv-nav-slot" @click="startBox(detail.id,detail.isCollect)">
						<image src="/static/image/start3.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
					<view v-if="detail.isCollect == 1" class="uv-nav-slot" @click="startBox(detail.id,detail.isCollect,detail.tAppUserCollectVo.id,detail.tAppUserCollectVo.version)">
						<image src="/static/image/start-choose.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</template>
				<template v-slot:left>
					<view class="uv-nav-slot"  @click="goback()">
						<image src="/static/image/go.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</template>
			</uv-navbar>
		</view>
		
		<view class="person-head" v-if="bannerList.length > 0">
			<uv-swiper img-mode="aspectFit" :list="bannerList" indicator indicatorMode="line" keyName="url" circular height="360" @click="dianjishipin"></uv-swiper>
		</view>
		<view class="content-box m-t24">
			<view class="list-box m-b16">
				<view style="width:100%">
					<view class="list-center-top">
						<view class="list-center">
							<h1>{{detail.staffName}}</h1>
							<view class="time">
								<view class="time-b-red">最早可约</view>
								<view class="time-f-red">{{detail.timeWork}}</view>
							</view>
						</view>
						
						<view>
							<view class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/t-address.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">{{detail.distance}}km</view>
							</view>
						</view>
					</view>
					
					<view class="list-bottom-box">
						<view class="list-bottom">
							<view class="font font-flex">
								<span>{{detail.score}}分</span>
								<uv-icon @click="goBusinessDetail(detail.tAppSupplierVo.id)" size="16" name="/static/image/t-shop.png" style="margin-right: 8rpx;"></uv-icon>
								<view @click="goBusinessDetail(detail.tAppSupplierVo.id)" class="shop">{{detail.tAppSupplierVo ? detail.tAppSupplierVo.supplierName : ''}}</view>
							</view>
						</view>
						<view class="font">服务单数 {{detail.orderCount}}</view>
					</view>
				</view>
			</view>
			
			<view class="public-box m-b16">
				<view class="detail-title">
					<view class="title-box">
						<view class="line"></view>
						<h1 class="title-h1">技师简介</h1>
					</view>
					<view @click="goDetailInt()" class="title-more">
						<view class="">查看更多</view>
						<uv-icon size="16" name="/static/image/more.png" style="margin-right: 8rpx;"></uv-icon>
					</view>
				</view>	
				<view class="detail-font">
					<!-- <rich-text :nodes="detail.staffDesc"></rich-text> -->
					<span>身高 {{detail.height || '无'}}cm</span>
					<span>学历 {{detail.school || '无'}}</span>
					<span>民族 {{detail.nation || '无'}}</span>
					<span>体重 {{detail.weight || '无'}}kg</span><br />
					<span>属相 {{detail.shuxiang || '无'}}</span>
					<span>星座 {{detail.xingzuo || '无'}}</span>
				</view>
			</view>
			
			<view class="public-box m-b16">
				<view class="detail-title">
					<view class="title-box">
						<view class="line orange-back"></view>
						<h1 class="title-h1">可服务项目</h1>
					</view>
					<view class="title-more" @click="goComment(detail.id)">
						<view class="">{{detail.commentCount}} 评论</view>
						<uv-icon size="16" name="/static/image/more.png" style="margin-right: 8rpx;"></uv-icon>
					</view>
				</view>	
				<view class="goods-box">
					<view v-for="item in list" class="goods" @click="goGoodsDetail(item.id)">
						<view class="img-box">
							<image class="img" :src="item.serviceImage" mode="widthFix"></image>
						</view>
						<view class="goods-font">       
							<h1 class="goods-h1">{{item.serviceName}}</h1>
							<view class="sale">销量 {{item.serviceBaseTime}}</view>
							<view class="font-bottom">
								<view class="font-bottom-l">
									<view class="red">
										<span class="goods-span-red">¥</span>{{item.serviceAmount}}
									</view>
									<view class="grey2"></view>
								</view>
								<view class="but-blue t-but" @click.stop="goOrder(item.id)">立即预约</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<uv-popup ref="popup" custom-style="height: 900rpx;">
			<view>
				<video style="width: 750rpx; height: 900rpx;" :src="videoUrl" controls autoplay="autoplay"></video>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				detail: null,
				list:[],
				id:'',
				isparent: null,
				userInfo:uni.getStorageSync('userInfo'),
				location: uni.getStorageSync('location'),
				bannerList: [],
				videoUrl: null
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.isparent = e.isparent
			this.listBox()
			console.log("banner", this.getVideoBase64("https://tinyuse.oss-cn-beijing.aliyuncs.com/80fc46faa7d44c4497d8f8e95e22defa.mp4"))
		},
		methods: {
			dianjishipin: function(index){
				if(index == 0 && this.videoUrl){
					this.$refs.popup.open('top');
				}
			},
			startBox:function(id,type,listId,version){
				checkLogin(() => {
					if(type == 0){ // 收藏
						console.log("收藏")
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/insertTAppUserCollect',{
							appUserId:this.userInfo.id,
							collectType:1, //1技师 2服务
							staffId:id,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								console.log("chengg")
								this.listBox()
							}
						})
					} else{ //取消收藏
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
							id:listId,
							version:version,
							isOn:1,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								this.listBox()
							}
						})
					} 
					
				})
			},
			listBox(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.id,
					lat: this.location ? this.location.latitude : null,
					lng: this.location ? this.location.longitude : null,
					withStartTime: true
				}).then((res) => {
					this.detail = res.data
					this.list = res.data.tAppServiceVos
					
					if(this.detail.staffVideo){
						var lists = JSON.parse(this.detail.staffVideo)
						for(var i in lists){
							this.videoUrl = lists[i].url
							this.bannerList.push({
								url: this.videoUrl + "?x-oss-process=video/snapshot,t_0,f_jpg",
								hasVideo: this.videoUrl ? 1 : 0,
							})
						}
					}				
					if(this.detail.staffBanner){
						var lists = JSON.parse(this.detail.staffBanner)
						for(var i in lists){
							this.bannerList.push({
								url: lists[i].url,
								hasVideo: this.videoUrl ? 1 : 0,
							})
						}
						
					}
				})
			},
			// 去确认订单
			goOrder(id){
				checkLogin(() => {
					if(this.isparent){
						uni.navigateTo({
							url:"/pages/order/confirmOrder?id="+ id + "&sid=" + this.id + "&psid=" + this.id
						})
					}else{
						uni.navigateTo({
							url:"/pages/order/confirmOrder?id="+ id + "&sid=" + this.id
						})
					}
					
				})
			},
			goComment(id){
				uni.navigateTo({
					url:"/pages/technician/comment?id="+id
				})
			},
			//技师简介
			goDetailInt(){
				uni.navigateTo({
					url:"/pages/technician/detailInt?id="+this.id
				})
			},
			//去店铺
			goBusinessDetail(id){
				uni.navigateTo({
					url:"/pages/technician/businessDetail?id="+ id
				})
			},
			goGoodsDetail(id){
				uni.navigateTo({
					url:"/pages/order/goodsDetail?id="+id
				})
			},
			goback(){
				uni.navigateBack()
			},
			
			getVideoBase64(url) { //封面
				let self = this
				let dataURL = '';
				let img = ''
				let video = document.createElement("video");
				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
				video.setAttribute('src', url);
				video.setAttribute('width', 400);
				video.setAttribute('height', 240);
				video.currentTime = 1; // 这里是截取第几帧
				video.addEventListener('loadeddata', function() { //创建虚拟视频组件拿第一帧
					let canvas = document.createElement("canvas")
					let width = video.width //canvas的尺寸和图片一样
					let height = video.height
					canvas.width = width;
					canvas.height = height;
					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
					dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
					// console.log(self.changimg(dataURL));
					this.imgUrl = dataURL;
					// console.log(this.imgUrl);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	
	.person-head {
		position: relative;
	}
		
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.people-img{
		width: 100%;
		/* height:740rpx; */
		background: #f5f5f5;
		text-align: center;
		overflow: hidden;
		@include flex;
		align-items: center;
		image{
			width: 100%;
			/* height:740rpx; */
		}
	}
	
	.list-box{
		position: relative;
		border-radius:24rpx;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
	}
	
	.list-center{
		/* width: calc(100% - 344rpx); */
		margin-right: 24rpx;
		h1{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		.time{
			display: flex;
			justify-content: flex-start;
			font-size: 22rpx;
			margin-bottom: 8rpx;
			.time-b-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #fff;
				background: #FF1818;
				border-radius: 4rpx;
				border: 2rpx solid #FF1818;
				z-index: 9;
				padding: 0 8rpx;
			}
			.time-f-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #FF1818;
				background: rgba(255,0,0,0.08);
				border: 2rpx solid rgba(255,24,24,0.3);
				border-left: 0;
				border-radius: 0 4rpx 4rpx 0;
				margin-left: -2rpx;
				padding: 0 8rpx;
			}
		}
		
		
	}
	.list-bottom-box{
		display: flex;
		justify-content: space-between;
	}
	.list-bottom{
		width: calc(100% - 200rpx);
		.font{
			color: #999999;
			font-size: 24rpx;
			span{
				color:#FFA23E;
				margin-right: 8rpx;
				font-weight: bold;
			}
		}
		.font-flex{
			display: flex;
			justify-content: flex-start;
			.shop{
				width: calc(100% - 150rpx);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.list-center-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	
	.icon-font{
		display: flex;
		justify-content: flex-end;
		color: #999999;
		font-size: 24rpx;
	}
	.t-but{
		width: 160rpx;
		border-radius: 48rpx;
		font-size: 22rpx;
		text-align: center;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: 24rpx;
	}
	
	
	
	.detail-font{
		font-size: 26rpx;
		color: #666;
		line-height: 40rpx;
		span{
			margin-right: 30rpx;
		}
	}
	
	/* --------------- */
	
</style>
